<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue_dev.js"></script>
	<script src="axios.min.js"></script>
	<script src="jquery-3.3.1.min.js"></script>	
</head>
<body>
	<div id="app">
		<h1>留言板</h1>
		<input type="text" id="contents">
		<!-- 建一个id叫contents的文本框-->
		<input type="submit" value="留言" v-on:click="create()">
		<!-- 建一个按钮，当这个按钮被点击的时候，执行create方法 -->
		<div>
			<div v-for="liuyan in yiji" style="border:1px solid black">
				<!-- 遍历yiji，把yiji中所有元素都叫liuyan，然后设置样式 -->
				<h3>{{ liuyan.contents }}</h3>
				<!-- 输出liuyan中所有contents元素 -->
				<span class="parent_id" style="display: none;">{{liuyan.message_id}}</span>
				<!-- 写一个span标签，再添加一个类，再把liuyan的message_id输出出来，然后隐藏这个标签 -->
				<input type="text" class="contents">
				<!-- input用于搜集用户信息，根据不同的type属性值，输入字段拥有很多种格式；一个叫contents的类 -->
				<button  v-on:click="create2j($event)">回复</button>
				<!-- 当这个按钮被点击的时候，执行create2j方法，并且把button本身当作参数传过去 -->
				<div v-for="erjiliuyan in erji">
					<!-- 遍历erji,把erji中所有元素都叫做erjiyuansu -->
					<p v-if="liuyan.message_id==erjiliuyan.parent_id"> 
						<!-- yiji中每个元素叫做liuyan，erji中的每个元素叫做erjiyuansu -->
						<!-- 如果liuyan中的message_id元素与erjiliuyan中的parent_id元素是相等的
						就输出erjiyuansu中的contents元素 -->
						{{erjiliuyan.contents}}
					</p>
				</div>
			</div> 
		</div>
	</div>
	<script>
		var app = new Vue({
			el:'#app',
			data() {
				return {
					yiji:null,
					erji:null
				}
			},
			methods:{
				create2j:function(event)
				{
					var el = event.currentTarget;
					// 建立一个变量el，获取事件监听器的当前节点
					var parent_id = $(el).siblings('.parent_id').html();
					// 建立一个变量叫parent_id，获取同级元素中类名为parent_id的html中的值
					var contents = $(el).siblings('.contents').val();
					// 建立一个变量contents，获取同级元素中类名为contents的value的值，就是文本框里面的值
					var _this = this;
					// 建立一个变量_this
					// 黄色的this代表的就是当前的上一级，也就是var app
					axios.post("index.php?contents="+contents+"&parent_id="+parent_id)
					// 用post方法把文本框中的值和父级id传给index.php
					.then(function (response) {
						// 将返回来的数据当作参数放到这个函数里面
						_this.erji = response.data;
						// _this上面已经解释
						// 将返回来的数据放到 var app 中的erji
						alert('回复成功')
					})
					.catch(function (error) {
						// 如果出现错误了，就在控制台显示出错
						console.log(error);
					});
				},
				create:function () {
					var _this = this;
					// 建立一个变量_this
					// 黄色的this代表的就是这个级别的上一级，也就是var app
					var contents = $("#contents");
					// 建立一个变量 叫做contents，代表的就是id为contents的文本框
					axios.post("index.php?contents="+contents.val())
					//用post方法把contents文本框中的值传给index.php
					.then(function (response) {
						_this.yiji = response.data;
						//将获取到的数据给var app中的yiji
						contents.val("");
						//然后将文本框的值设置为空字符串
						alert("留言成功");
					})
					.catch(function (error) {
						console.log(error);
						//遇到异常时，在控制台显示错误信息
					});
				}
			},
			filters: {
				currencydecimal(value) {
					return value.toFixed(2)
					//返回小数点后保留两位后的参数
				}
			},
			//当挂载元素全部加载完成时执行的钩子函数
			mounted() {
				axios
				.get('index.php?parent_id=0')
				// 用get方法将parent_id=0的所有元素传到index.php
				.then(response => (this.yiji = response.data))//将获取到的数据给yiji
				.catch(error => {
					console.log(error)//遇到异常时，在控制台显示错误信息
				});
				axios
				.get('index.php?parent_id=1')
				// 将parent_id=1的所有元素传到index.php
				.then(response => (this.erji = response.data))//将获取到的数据给erji
				.catch(error => {
					console.log(error)//遇到异常时，在控制台显示错误信息
				});
			}
		});
	</script>
</body>
</html>